
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>用户登录</title>
  <style>
    table{
      margin: auto;
      width: 500px;
      border-collapse: collapse;
    }
    table,td{
      border: 1px solid black;
    }
    input,td{
      height: 30px;
    }
    .right{
      text-align: right;
    }
    .center{
      text-align: center;
    }
    .red{
      color: red;
    }
    .img{
      height: 30px;
      position: relative;
      top:10px;
    }
  </style>
</head>
<body>
<form action="reader?action=login" method="post" onsubmit="return checkData();">
  <table>
    <caption><h3>用户登录</h3></caption>
    <tr>
      <td class="right">登录名：</td>
      <td>
        <input type="text" id="username" onfocus="clearMsg('idMsg')" name="username">
        <span class="red" id="idMsg"></span>
      </td>
    </tr>
    <tr>
      <td class="right">密码：</td>
      <td>
        <input type="password" id="password" onfocus="clearMsg('pwdMsg')" name="password">
        <span class="red" id="pwdMsg"></span>
      </td>
    </tr>
    <tr>
      <td class="right">验证码：</td>
      <td>
        <input type="text" id="checkCode" onfocus="clearMsg('codeMsg')" name="checkCode">
        <img class="img" onclick="freshCheckCode(this)" src="checkCodeServlet" alt="">
        <span class="red" id="codeMsg"></span>
      </td>
    </tr>
    <tr>
      <td class="right">记住登录状态：</td>
      <td>
        <select name="rememberMe" >
          <option value="0">请选择</option>
          <option value="1">1天</option>
          <option value="7">1周</option>
          <option value="30">1月</option>
          <option value="365">1年</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2" class="center">
        <input type="reset" value="重置">
        <input type="submit" value="登录">
      </td>
    </tr>
    <c:if test="${not empty msg}">
      <tr>
        <td colspan="2" class="center red">${msg}</td>
      </tr>
    </c:if>
  </table>
</form>
</body>
<script>
  //刷新验证码
  function freshCheckCode(img){
    img.src='checkCodeServlet?date='+new Date();
  }
  //提交前验证
  function checkData(){
    let username = document.getElementById('username').value;
    if(username == ''){
      document.getElementById('idMsg').innerText='登录名不能空';
      return false;
    }
    let password = document.getElementById('password').value;
    if(password == ''){
      document.getElementById('pwdMsg').innerText='登录密码不能空';
      return false;
    }
    return true;
  }

  function clearMsg(id){
    document.getElementById(id).innerText='';
  }
</script>
</html>
